<template>
  <div>
    <el-page-header @back="goBack" content="维修信息详情"> </el-page-header>
    <el-descriptions border style="margin-top: 20px" :title="repairInfo.name">
      <el-descriptions-item label="用户名">{{
        repairInfo.username
      }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{
        repairInfo.mobile
      }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{
        repairInfo.email
      }}</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">{{ repairInfo.memo }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="评分">
        <el-rate
          v-model="repairman.serviceQuality * 0.05"
          disabled
          :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
          show-score
          text-color="#ff9900"
          score-template="{value}"
        >
        </el-rate>
      </el-descriptions-item>
      <el-descriptions-item label="部门">{{
        repairInfo.departmentName
      }}</el-descriptions-item>
    </el-descriptions>
    <h2>维修信息</h2>
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getRepairData()"
    >
      <el-form-item prop="startTime">
        <el-date-picker
          v-model="dataForm.startTime"
          type="datetime"
          value-format="timestamp"
          placeholder="开始时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="endTime">
        <el-date-picker
          v-model="dataForm.endTime"
          type="datetime"
          value-format="timestamp"
          placeholder="完成时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getRepairData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="exportExcel">excel导出</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="dataList" v-loading="dataListLoading">
      <el-table-column prop="applicantName" label="申请人"> </el-table-column>
      <el-table-column prop="auditorName" label="审核人"> </el-table-column>
      <el-table-column prop="auditStatus" label="业务状态">
        <template slot-scope="scope">
          <span v-if="scope.row.auditStatus === 0">
            <el-tag>等待审核</el-tag>
          </span>
          <span v-else-if="scope.row.auditStatus === 1">
            <el-tag type="success">审批完成</el-tag>
          </span>
          <span v-else-if="scope.row.auditStatus === 2">
            <el-tag type="info">处理完成</el-tag>
          </span>
          <span v-else-if="scope.row.auditStatus === 3">
            <el-tag type="warning">等待处理</el-tag>
          </span>
          <span v-else-if="scope.row.auditStatus === -1">
            <el-tag type="error">审核失败</el-tag>
          </span>
          <span v-else>
            <el-tag>未知错误</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column width="150" prop="worksheetType" label="业务类型">
        <template slot-scope="scope">
          {{ typeArr.find((res) => res.id === scope.row.worksheetType).name }}
        </template>
      </el-table-column>
      <el-table-column prop="memo" label="备注"> </el-table-column>
      <el-table-column prop="replyInfo" label="回执信息"> </el-table-column>
      <el-table-column prop="adminNote" label="管理员提示"> </el-table-column>
      <el-table-column prop="applyTime" label="申请时间"> </el-table-column>
      <el-table-column prop="startTime" label="开始时间"> </el-table-column>
      <el-table-column prop="endTime" label="完成时间"> </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    repairman: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dataList: [],
      dataListLoading: false,
      repairInfo: {},
      // 分页
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {},
      // 工单类型数组
      typeArr: [
        {
          id: 2,
          name: 'VPN申请(本校师生)'
        },
        {
          id: 12,
          name: 'VPN申请(实践基地教师)'
        },
        {
          id: 3,
          name: '入网账号和电子邮箱申请'
        },
        {
          id: 10,
          name: '服务器资源申请'
        },
        {
          id: 11,
          name: '网络域名与网站开通审批'
        },
        {
          id: 6,
          name: '网络故障'
        },
        {
          id: 7,
          name: '软件故障'
        },
        {
          id: 8,
          name: '硬件故障'
        }
      ]
    }
  },
  methods: {
    goBack() {
      this.$emit('clearRepairman')
    },
    getRepairman() {
      this.$http({
        url: this.$http.adornUrl(
          `sys/visitor/getVisitorById/${this.repairman.repairmanId}`
        ),
        method: 'get'
      }).then(({ data }) => {
        this.repairInfo = data.data
      })
    },
    getRepairData() {
      this.$http({
        url: this.$http.adornUrl('sys/maintenance/data/getRecordList'),
        method: 'post',
        params: {
          page: this.pageIndex,
          size: this.pageSize
        },
        data: this.$http.adornData({
          ...this.dataForm,
          repairmanId: this.repairman.repairmanId
        })
      }).then(({ data }) => {
        this.dataList = data.data.list
        this.totalPage = data.data.total
      })
    }
  },
  created() {
    this.getRepairData()
    this.getRepairman()
  }
}
</script>

<style lang="scss" scoped></style>
